<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5敲击乐</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <!-- 键盘结构 -->
    <!-- 盒子，box 装东西 -->
    <!-- <div>
        <div>
            <h3>A</h3>
            <span>clap</span>
        </div>
        <div>
            <h3>S</h3>
            <span>hihat</span>
        </div>
        <div>
            <h3>D</h3>
            <span>kick</span>
        </div>
        <div>
            <h3>F</h3>
            <span>snare</span>
        </div>
    </div> -->
    <!-- <div class="keys">

        <div class="key">
            <h3>A</h3>
            <span>clap </span>
        </div>
        <div class="key">
            <h3>S</h3>
            <span>hihat </span>
        </div>
        <div class="key">
            <h3>D</h3>
            <span>kick </span>
        </div>
        <div class="key">
            <h3>F</h3>
            <span>snare </span>
        </div>
        <div class="key">
            <h3>G</h3>
            <span>tom </span>
        </div>
        <div class="key">
            <h3>H</h3>
            <span>cymbal </span>
        </div>
        <div class="key">
            <h3>I</h3>
            <span>hi-hat </span>
        </div>
        <div class="key">
            <h3>J</h3>
            <span>ride </span>
        </div>
        <div class="key">
            <h3>K</h3>
            <span>crash </span>
        </div>
        <div class="key">
            <h3>L</h3>
            <span>floor tom </span>
        </div>
    </div> -->
    <div class="keys">
        <div class="key">
            <h3>A</h3>
            <span class="sound">clap</span>
        </div>
        <div class="key">
            <h3>S</h3>
            <span class="sound">hihat</span>
        </div>
        <div class="key">
            <h3>D</h3>
            <span class="sound">kick</span>
        </div>
        <div class="key">
            <h3>F</h3>
            <span class="sound">openhat</span>
        </div>
        <div class="key">
            <h3>G</h3>
            <span class="sound">boom</span>
        </div>
        <div class="key">
            <h3>H</h3>
            <span class="sound">ride</span>
        </div>
        <div class="key">
            <h3>J</h3>
            <span class="sound">snare</span>
        </div>
        <div class="key">
            <h3>K</h3>
            <span class="sound">tom</span>
        </div>
        <div class="key">
            <h3>L</h3>
            <span class="sound">tink</span>
        </div>
    </div>
        </div>
        <div class="key">
            <h3></h3>
            <span class="sound"></span>
        </div>
        <div class="key">
            <h3></h3>
            <span class="sound"></span>
        </div>
        <div class="key">
            <h3></h3>
            <span class="sound"></span>
        </div>
        <div class="key">
            <h3></h3>
            <span class="sound"></span>
        </div>
        <div class="key">
            <h3></h3>
            <span class="sound"></span>
        </div>
        <div class="key">
            <h3></h3>
            <span class="sound"></span>
        </div>
    </div>
    <script src="./script.js"></script>
</body>
</html>